@page {
  size: A4;
  margin: 15mm 15mm 10mm 15mm; /* 1.5 cm left and right margin */
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Calibri', sans-serif;
  font-size: 10pt;
  background: #f4f4f4;
  color: #000;
}
.container {
  max-width: 190mm;
  width: 100%;
  margin: auto;
  background: #fff;
  padding: 5px;
  page-break-inside: avoid;
}
.extra-page {
  display: none;
}
@media print {
  .extra-page {
    display: block;
  }
  .remove { display: none; }
}

/* Title */
.title {
  font-size: 18pt;
  font-weight: bold;
  background: #f0f0f0;
  text-align: center;
  padding: 2mm 0;
  margin-bottom: 3mm;
  width: 100%; /* Full page width */
}
.title select {
  font-size: inherit;
  font-weight: inherit;
  border: none;
  background: transparent;
}

/* Header */
.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3mm;
}
.logo img {
  height: 40mm; /* Match table height */
}
.distribution-details {
  font-size: 9pt;
  border-collapse: collapse;
}
.distribution-details td {
  padding: 0.5mm;
}

/* Meta */
.meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3mm;
}
.customer-table,
.invoice-info-table {
  border-collapse: collapse;
  font-size: 9pt;
  width: 48%;
}
.customer-table td,
.invoice-info-table td {
  padding: 0.5mm;
}
.customer-table input,
.invoice-info-table input {
  width: 100%;
  font-family: inherit;
  font-size: 9pt;
  border: none;
  padding: 0.5mm;
}

/* Table Titles */
.table-title {
  background: #f0f0f0;
  font-weight: bold;
  padding: 0.5mm;
}

/* Main Invoice Lines */
.invoice-lines {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  min-height: 50mm;
}
.invoice-lines th,
.invoice-lines td {
  border: none;
  padding: 0.5mm;
  height: 5mm; /* Fixed row height for all rows */
}
.invoice-lines th {
  background: #f0f0f0;
}
.invoice-lines input,
.invoice-lines textarea {
  width: 100%;
  border: none;
  font-family: inherit;
  font-size: 8.5pt;
  background: transparent;
}
.invoice-lines td:nth-child(1) input { font-size: 8.5pt; }
.invoice-lines td:nth-child(2) input { font-size: 8.5pt; }
.invoice-lines td:nth-child(4) input { font-size: 8.5pt; }
.invoice-lines td:nth-child(2) input,
.invoice-lines td:nth-child(6) input {
  text-align: center;
}
.invoice-lines td:nth-child(5) input,
.invoice-lines td:nth-child(7) input {
  text-align: right;
}
.invoice-lines tr {
  margin-bottom: 3.5pt;
}

/* Empty rows */
.empty-row td {
  height: 5mm;
}

/* Spacer */
.spacer {
  height: 2em;
}

/* Rows */
.row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3mm;
  gap: 5mm;
}

/* Delivery & Payment */
.delivery-box,
.payment-box {
  width: 55%;
}
.delivery-box {
  height: 20mm;
}
.payment-box {
  height: 18mm;
}
.delivery-box textarea,
.payment-box textarea {
  width: 100%;
  font-family: inherit;
  font-size: 9pt;
  border: 1px solid #000;
  padding: 0.5mm;
}

/* Base-Rates Table */
.base-rates-table {
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 9pt;
  width: 50mm;
  text-align: right;
}
.base-rates-table th,
.base-rates-table td {
  border: none;
  padding: 0.5mm;
}
.base-rates-table th {
  background: #f0f0f0;
  text-align: left;
}
.base-rates-table td:nth-child(1),
.base-rates-table td:nth-child(3) {
  text-align: right;
}

/* Summary Tables */
.summary-tables {
  display: flex;
  flex-direction: column;
  gap: 1mm;
  width: 50mm;
  text-align: right;
}
.summary-tables table {
  border-collapse: collapse;
  font-size: 9pt;
  table-layout: fixed;
  width: 100%;
}
.summary-tables th,
.summary-tables td {
  border: none;
  padding: 0.5mm;
}
.summary-tables th {
  background: #f0f0f0;
  text-align: left;
}
.summary-tables td {
  text-align: right;
}
.summary-tables input,
.summary-tables span {
  width: 100%;
  border: none;
  font-family: inherit;
  font-size: inherit;
  text-align: right;
}

/* Amount in Words */
.amount-words-section {
  margin-bottom: 3mm;
}
.amount-words-section textarea {
  width: 100%;
  font-family: inherit;
  font-size: 9pt;
  border: 1px solid #000;
  padding: 0.5mm;
}

/* Footer Boxes */
.footer-boxes {
  display: flex;
  justify-content: space-between;
  margin-top: 5mm;
}
.foot-box {
  width: 48%;
  text-align: center;
}
.stamp-area,
.signature-area {
  height: 20mm;
  border: 1px solid #000;
}

/* Actions */
.actions {
  margin-top: 5mm;
  text-align: center;
}

/* HR and blanks */
.hr-gray {
  border: 0;
  border-top: 1px solid gray;
  width: 100%;
}
.hr-black {
  border: 0;
  border-top: 3.5pt solid black;
  width: 100%;
}
.blank-line {
  height: 3.5pt;
}

/* Editing Highlights */
@media screen {
  .invalid { background: #ffebcc; }
  .valid { background: #e0ffe0; }
  .calculated { background: #ffffe0; }
}
/* Print */
@media print {
  .invalid,
  .valid,
  .calculated {
    background: transparent !important;
  }
  #add-row, .actions, .remove { display: none; }
  .container { padding: 0; }
  .page-break { page-break-before: always; }
  .empty-row { display: table-row; }
  .extra-page { display: block; }
}

/* Responsiveness */
@media screen and (max-width: 800px) {
  .header, .meta, .row, .footer-boxes {
    flex-direction: column;
    align-items: center;
  }
  .customer-table, .invoice-info-table, .base-rates-table, .summary-tables, .delivery-box, .payment-box {
    width: 100%;
    margin-bottom: 5px;
    height: auto;
  }
  .logo img {
    max-width: 100%;
  }
  .invoice-lines col {
    width: auto !important;
  }
  .spacer {
    height: 1em;
  }
  .row {
    gap: 0;
  }
}